import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Icon, Dropdown, Menu, Avatar } from 'antd';

import styles from './index.module.css';

/**
 * 全局Header
 */
export default class GlobalHeader extends PureComponent {

  static propTypes = {
    collapsed: PropTypes.bool.isRequired,
    toggleMenu: PropTypes.func.isRequired,
    onLogout: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired
  };

  static defaultProps = {
    collapsed: false,
    user: { avatar: '', name: '无名氏' }
  }

  handleClickMenuItem = ({ item, key }) => {

    // 如果是退出登录
    if (key == 'logout') {
      this.props.onLogout();
    }
  }

  render() {

    let { collapsed, toggleMenu, user } = this.props;
    user = user || { name: '无名氏'};

    const menu = (
      <Menu onClick={this.handleClickMenuItem}>
        <Menu.Item key='logout'>
          <Icon type='logout' />
          <span className={styles.dropMenuItem}>退出登录</span>
        </Menu.Item>
      </Menu>
    );

    return (
      <div className={styles.header}>
        <Icon
          className={styles.trigger}
          type={collapsed ? 'menu-unfold' : 'menu-fold'}
          onClick={toggleMenu}
        />
        <div className={styles.blank} />
        <Dropdown overlay={menu}>
          <div className={styles.dropMenu}>
            <span>
              <Avatar size='small' className={styles.dropMenuTitle} src={user.avatar} />
              <span className={styles.dropMenuTitle}>{user.name}</span>
            </span>
          </div>
        </Dropdown>
      </div>
    );
  }
}